<template>
  <div>
    <a-button type="primary" @click="save" style="margin-left: 2px">
      保存
    </a-button>
    <a-button @click="openAttributeModel" style="margin-left: 10px">
      属性
    </a-button>

    <a-tabs type="card" style="margin-top: 15px">
      <a-tab-pane key="1" tab="数据源">
        <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
          <a-form-item label="类型">
            <a-radio-group v-model:value="setting.options.resource">
              <a-radio value="1">TSQ语句</a-radio>
              <a-radio value="2">系统数据</a-radio>
              <a-radio value="3">静态数据</a-radio>
            </a-radio-group>
          </a-form-item>
          <div v-show="setting.options.resource == '1'">
            <!-- TSQ语句 -->
            <a-form-item label="数据库">
              <a-select
                v-model:value="setting.options.dbId"
                placeholder="请选择"
              >
                <a-select-option
                  v-for="(item, index) in linkDbData"
                  :key="index"
                  :value="item.id"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="SQL">
              <a-textarea
                :rows="5"
                v-model:value="setting.options.sql"
                placeholder="请输入sql语句"
              />
            </a-form-item>
          </div>
          <!-- 系统数据 -->
          <a-form-item label="请选择" v-show="setting.options.resource == '2'">
            <a-select
              v-model:value="setting.options.region"
              placeholder="请选择方法"
            ></a-select>
          </a-form-item>
          <!-- 静态数据 -->
          <a-form-item label="数据" v-show="setting.options.resource == '3'">
            <a-textarea
              :rows="5"
              v-model:value="setting.options.stateData"
              placeholder="请输入静态数据"
            />
          </a-form-item>
          <a-form-item
            :wrapper-col="{ span: 14, offset: 4 }"
            v-show="setting.options.resource == '1'"
          >
            <a-button @click="selectSQL">查询数据</a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="2" tab="参数编辑">
        <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
          <a-form-item class="mb-1" placeholder="请选择标题" label="标题">
            <a-select v-model:value="setting.options.title">
              <a-select-option
                v-for="item in setting.options.filedList"
                :key="item"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item class="mb-1" label="内容">
            <a-select
              placeholder="请选择内容"
              v-model:value="setting.options.content"
            >
              <a-select-option
                v-for="item in setting.options.filedList"
                :key="item"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item class="mb-1" label="头像是否显示">
           <a-switch
                  v-model:checked="setting.options.needHead"
                  style="margin-left: 19px"
                />
          </a-form-item>
          <a-form-item class="mb-1" label="头像图片地址" v-show="setting.options.needHead">
            <a-select
              v-model:value="setting.options.headSrc"
            >
              <a-select-option
                v-for="item in setting.options.filedList"
                :key="item"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <!-- <a-form-item class="mb-1" label="右侧图片是否显示">
            <a-switch
                  v-model:checked="setting.options.needPicture"
                  style="margin-left: 19px"
                />
          </a-form-item>
          <a-form-item class="mb-1" label="右侧图片高度" v-show="setting.options.needPicture"> 
            <a-input-number
                  v-model:value="setting.options.pictureHeight"
                  style="margin-left: 19px"
                />
          </a-form-item>
          <a-form-item class="mb-1" label="右侧图片地址" v-show="setting.options.needPicture"> 
            <a-input
                  v-model:value="setting.options.headSrc"
                  style="margin-left: 19px"
                />
          </a-form-item> -->
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="3" tab="预览">
        <Flist :setting="setting"></Flist>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
  import { Flist } from '@/mycomponents/dataComponent/index'
  import { Get, Update } from '@/api/component/api'
  import { Gets } from '@/api/databaselink/api'
  import { Getsqlcolumns } from '@/api/report/api'
  export default {
    components: {
      Flist,
    },
    props: ['selectId'],
    watch: {
      selectId(val) {
        this.getData(val)
      },
    },
    data() {
      return {
        setting: {
          options: {
            resource: '1',
          },
        },
        linkDbData: [],
        height: undefined,
        maxWidth: undefined,
      }
    },
    created() {
      Gets().then((res) => {
        if (res.isSuccess) {
          this.linkDbData = res.content.items
        }
      })
      this.getData(this.selectId)
      console.log('this.linkDbData',this.linkDbData)
    },

    methods: {
      openAttributeModel() {
        console.log('1111')
      },
      blur() {
        this.setting.options.height = this.height
      },
      getData(val) {
        Get({ id: val }).then((res) => {
          console.log(res)
          if (res.isSuccess) {
            this.formData = {
              name: res.content.name,
              componentType: res.content.componentType,
              dictId: res.content.dictId,
              note: res.content.Note,
            }
            this.setting = JSON.parse(res.content.json)

            this.maxWidth =
              this.setting.options.maxWidth === undefined
                ? undefined
                : JSON.parse(JSON.stringify(this.setting.options.maxWidth))
          }
        })
      },
      save() {
        var data = {
          name: this.formData.name,
          componentType: this.formData.componentType,
          dictId: this.formData.dictId,
          Json: JSON.stringify(this.setting).toString(),
          note: this.formData.note,
        }
        console.log(typeof JSON.stringify(this.setting))
        console.log(data)
        Update({ id: this.selectId }, data).then((res) => {
          if (res.isSuccess) {
            this.$message.success('配置保存成功！', 2.5)
          } else {
            this.$message.error(res.message)
          }
        })
      },
      selectSQL() {
        var that = this
        Getsqlcolumns({
          DbId: that.setting.options.dbId,
          Sql: that.setting.options.sql,
        }).then((res) => {
          if (res.isSuccess) {
            this.$message.success('参数返回成功，请至参数编辑进行设置')
            this.setting.options.filedList = res.content.items
          } else {
            this.$message.error('sql语句语法错误' + res.message)
          }
        })
      },
    },
  }
</script>
